<template>
		<view class="zlk-bg">
			<!-- 顶部标题栏 -->
			<topBar :showIcon="false">
				<template #barTitle>登录</template>
			</topBar>
			<!-- 顶部标题栏END -->
		
			
			<view class="bg-white  text-bold text-xl" style="padding-top: 71upx;padding-left: 32upx;">
				<image src="../../static/img/sl_logo.png"  class="img"></image>
			</view>
			<view class="bg-white" style="padding-top: 24upx;padding-left: 32upx;">
				<view class="sl-title text-xxl text-black text-bold">欢迎来到丝路国际银行</view>
				
			</view>
			<!-- <view class="bg-white  flex justify-center text-bold text-x" style="padding-top: 100upx;">SIB 丝路国际银行</view> -->
			<view class="bg-white  text-bold text-xl" style="padding-top: 72upx;padding-left: 32upx;">已向{{phone}}发送短信验证码</view>

			
			<view class="bg-white" style="padding-top: 72upx;padding-left: 32upx;padding-right: 32upx;">
				
				<view class="solid-bottom padding-left-sm cu-form-group " style="border: 0;">
					<view class="cu-form-group flex">
						<input placeholder="请输入6位短信验证码" v-model="verify"></input>				
						<view class="sendcode" @click="getdata">
							<text>{{show?second + "s":"发送"}}</text>
						</view>
					</view>
		
				</view>
				
				<checkbox-group class="block" > <!-- @change="CheckboxChange" -->
					<view style="padding-top: 32upx;">
						
						<text class="text-sm text-gray" >请输入接收到得短信验证码</text>
					</view>
				</checkbox-group>
				
			</view>
			<view  class="bg-white flex justify-center" style="padding-top: 80upx;padding-left: 32upx;padding-right: 32upx;">
				<button class="bg" style="height: 98upx;" @tap="submit">确定</button>
				
			</view>
		</view>
		
</template>

<script>
	var api = require("../../common/api");
	var util = require("../../common/util");
	import {
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				phone:'',
				verify:'',
				second: 60,
				show: true,
				modalName:null
			}
		},
		onLoad(option){
			if(option.Phone){
				this.phone = option.Phone
				this.sendcode();
			}
			
			
		},
		methods: {
			...mapMutations(["settoken"]),
			getdata(e){
				if(this.show==false){
					this.sendcode()		
				}
							
			},
			
			getCode() { //倒计时
			this.show = true
				var interval = setInterval(() => {
					let times = --this.second
					if(this.second > 0 ){
						
					}else{
						this.show = false
					}
					this.second = times < 10 ? '0' + times : times //小于10秒补 0
				}, 1000)
				setTimeout(() => {
					clearInterval(interval)
					this.second = 60
					
				}, 60000)
			},
			
			sendcode(){
				if(util.checkPhone(this.phone)==false){
					util.showErrorToast('请输入正确手机号')
					return false
				}
				uni.request({
					url:api.apis.sl_sendcode,
					method:'POST',
					data:{
						phoneNumber:this.phone,
					},
					success: (res) => {
						console.log(res)
						if(res.data.code==200){
							util.showErrorToast("发送成功，请注意查收");
							this.getCode()
						
						}else{
							util.showErrorToast(res.data.msg);
							this.show = false
						}
					}
				})
			},
		
			// 确定
			submit(){
				let that = this
				if(this.verify.length<=0){
					util.showErrorToast('请输入验证码')
					return false
				}
				 
				 //用户校验验证码
				 
				uni.request({
					url:api.apis.sl_verification,
					method:'POST',
					data:{
						phoneNumber:this.phone,
						verificationCode:this.verify,
					},
					success: (res) => {
						uni.hideLoading();
						if(res.data.code==200){//校验成功
						
							// if(res.data.Success==false){//未注册。跳转注册页面
							// 	that.loginShowModal()  //弹框
							// }else{//已注册，去调用登录接口
								getApp().globalData.isLogining = true
                                uni.setStorageSync("iphone",this.phone)
								//保存token
								uni.setStorageSync("token",res.data.token);
								uni.navigateTo({
									url: "/pages/sl_index/index"
								})
								
								// uni.request({
								// 	url:api.apis.sl_login,
								// 	method:'POST',
								// 	data:{
								// 		phoneNumber:this.phone,
								// 	},
								// 	success: (res) => {
								// 		console.log(res)
								// 		if(res.data.code==200){
								
										
								// 		}else{
								// 			util.showErrorToast(res.data.msg);
								// 		}
								// 	}
								// })
							//}
													
						}else{
							util.showErrorToast(res.data.msg)
						}
					}
				})
			},
			 loginShowModal() {
				let that = this
				uni.showModal({
					title: '温馨提示',
					content: '该手机号尚未注册，请重新输入或使用该手机号注册',
					confirmText: '注册',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url:'/pages/sl_register/register?Phone='+ that.phone,
							})
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			}
			
		}
	}
</script>

<style>
	.border-code {
		border: 1upx solid #0081ff;
		border-radius: 40upx;
	}
	.cu-form-group {
		width: calc(100% - 20rpx);
		margin-top: 10upx auto;
		padding: 0;
		border-top: none;
		border-bottom: 1px solid rgba(225, 228, 234, 1);
	}
	.img{
		width: 76px;
		height: 35px;
	}
	.bg{
		width: 100%;
		background: linear-gradient(90deg, #FA4F54 0%, #F2272A 100%);
		border-radius: 5px;
		color: #FFFFFF;
	}
	.title{
		width: 100%;
		height: 88rpx;
		background-color: white;
		display: flex;
		border-bottom: 1rpx solid #FFFFFF;
		color:#5D5D5D ;
		font-size: 36rpx;
		line-height: 88rpx;
	}
	.title-text{
		width: 100%;
		text-align: center;
		line-height: 88rpx;
		font-weight: 600;
		
	}
	.sendcode{
		color: #EB2020;
		font-size: 28rpx;
		font-weight: 400;
		width:96rpx;
		line-height: 56rpx;
		text-align: center;
		height: 56rpx;
		border-radius: 4rpx;
		border: 1rpx solid #EB2020;
	}
</style>
